<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			<style>
					#divA
								{
									width: 200px;
									height: 200px;
									background-color: lightsalmon;
									padding: 10px;
								}
								
								#divB
								{
									
										width: 100px;
										height: 100px;
										background-color: lightblue;
										padding: 10px;
								}
								#divC
								{
									
										width: 50px;
										height: 50px;
										background-color: lightgoldenrodyellow;
										padding: 10px;
								}
					</style>
		</style>
	</head>
	<body>
		<div id="divA">
					<div id="divB">
						<div id="divC">
							C
						</div>
						B
					</div>
					A
				</div>
				
				<script>
							
							// 1。 冒泡 (默认   从里到外)
							divA.onclick = function(){
								alert("A被点击了")
								
							}
							divB.onclick = function(){
								alert("B被点击了")
							}
							divC.onclick = function(){
								alert("C被点击了")
								event.stopPropagation();
							}			
							
							// 2. 捕获  (默认   从外到里)
							// divA.addEventListener("click",function(){
							// 	alert("A被点击了")
							// },true)
							// divB.addEventListener("click",function(){
							// 	alert("B被点击了")
							// },true)
							// divC.addEventListener("click",function(){
							// 	alert("C被点击了")
							// },true)
							
							// 停止继续传递
							// event.stopPropagation();
							// 取消默认处理  (取消某些html元素自己默认的事件处理)
							// event.preventDefault()
				
						</script>
	</body>
</html>
